<!-- 今日最近异常域名访问事件 -->
<template>
  <div class="wrap">
    <span class="title">今日最近异常域名访问事件</span>
    <el-table :data="list" style="width: 100%; padding-top: 15px">
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_no }}
        </template>
      </el-table-column>
      <el-table-column label="发生时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime }}
        </template>
      </el-table-column>
      <el-table-column label="发生终端" align="center">
        <template slot-scope="scope">
          {{ scope.row.terminal }}
        </template>
      </el-table-column>
      <el-table-column label="敏感域名"  align="center">
        <template slot-scope="scope">
          {{ scope.row.url }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { transactionList } from "@/api/remote-search";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: "success",
        pending: "danger"
      };
      return statusMap[status];
    },
    orderNoFilter(str) {
      return str.substring(0, 30);
    }
  },
  data() {
    return {
      list: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      transactionList().then((response) => {
        this.list = response.data.items.slice(0, 8);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  background: #fff;
  padding: 15px;
}
</style>
